<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表内高级搜索</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color:rgb(243,243,243);
        }
        .box{
            width: 100%;
            height: 440px;
            margin: 0 auto;
        }
        .left{
            margin-left: 150px;
            width: 200px;
            height: 350px;
            float: left;
        }
        .right{
            margin-left: 150px;
            width: 200px;
            height: 350px;
            float: left;
        }
        .bottom{
            margin-top: 20px;
            margin-left: 510px;
            width: 200px;
            height: 50px;
        }
        p{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="box">
    <form class="layui-form">
        <div class="left">
            <p> 课程序号：</p>
            <div class="layui-input-inline">
                <input type="text" id="courseId" name="courseId" required lay-verify="required" placeholder="课程序号" autocomplete="off" class="layui-input">
            </div>
            <p> 课程价格：</p>
            <div class="layui-input-inline">
                <input type="text" id="courseNprice" name="courseNprice" required lay-verify="required" placeholder="课程价格" autocomplete="off" class="layui-input">
            </div>
            <p> 上传人：</p>
            <div class="layui-input-inline">
                <input type="text" id="trueName" name="trueName" required lay-verify="required" placeholder="上传人" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="right">
            <p> 课程分类：</p>
            <div class="layui-input-inline">
                <select class="layui-select" name="name" id="name">
                    <option value=""></option>
                </select>
            </div>
            <p> 课程名称：</p>
            <div class="layui-input-inline">
                <input type="text" id="courseName" name="courseName" required lay-verify="required" placeholder="课程名称" autocomplete="off" class="layui-input">
            </div>
            <p> 课程搜索关键字：</p>
            <div class="layui-input-inline">
                <input type="text" id="coursePrimary" name="coursePrimary" required lay-verify="required" placeholder="课程搜索关键字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--<div class="bottom">
            <button type="reset" class="layui-btn layui-btn-primary layui-border-green">重置</button>
            <button type="button" class="layui-btn layui-btn-primary layui-border-green" onclick="search()">开始搜索</button>
        </div>-->
    </form>
</div>
<script>
    layui.use(['jquery','layer','table','form'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var form=layui.form;

        //查询所有课程分类 给下拉框赋值
        $.ajax({
            url: '/course/getCourseClassAll',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                var syProductCategroys = data.data;
                for (var i = 0; i < syProductCategroys.length; i++) {
                    $('#name').append('<option value="' + syProductCategroys[i].name + '" >' + syProductCategroys[i].name + '</option>')
                }
                form.render('select');//渲染到select标签
            }
        });

        /*search=function search(){
            var courseId = $("input[name=courseId]").val();
            var courseNprice = $("input[name=courseNprice]").val();
            var name = $("#name option:selected").val();
            var courseName = $("input[name=courseName]").val();
            var coursePrimary = $("input[name=coursePrimary]").val();
            var trueName = $("input[name=trueName]").val();
            var param = {
                'courseId': courseId,
                'courseNprice': courseNprice,
                'name': name,
                'courseName': courseName,
                'coursePrimary' : coursePrimary,
                'trueName': trueName
            }
            $.ajax({
                url:"/course/getCourseRetrieval",
                data:param,
                type:"post",
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    parent.$("#ProductRetrieval").data("Productdata",data.data);
                    var data = parent.$("input[name=ProductRetrieval]").data("Productdata");
                    var layer = parent.layer;
                    layer.close(layer.index);
                }
            })

        }*/

    })
</script>
</body>
</html>